<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <!-- table渲染区域 -->
    </div>
    <button>渲染数据</button>
    <hr />
    <span>你爱好的运动是</span>
    <input
      type="checkbox"
      id="all"
      onclick="allclick()"
    />全选/全不选(全选自动勾选)
    <br />
    <input type="checkbox" class="sport" onchange="checkAll()" />足球<label
      for="sport"
    ></label>
    <input type="checkbox" class="sport" onchange="checkAll()" />篮球<label
      for="sport"
    ></label>
    <input type="checkbox" class="sport" onchange="checkAll()" />羽毛球<label
      for="sport"
    ></label>
    <input type="checkbox" class="sport" onchange="checkAll()" />乒乓球<label
      for="sport"
    ></label>
    <br />
    <button class="select-all" onclick="selectAll()">全选</button>
    <button class="select-notAll" onclick="unselectAll()">全不选</button>
    <button class="select-unall" onclick="toggleSelection()">反选</button>
    <button class="submit" onclick="submit()">提交并打印</button>
    <ul>
      <li>北京</li>
      <li>上海</li>
      <li>四川</li>
      <li>深圳</li>
    </ul>
    <button onclick="createGz()">创建一个广州节点</button>
    <br />
    <button onclick="insertGzBeforeBj()">将广州节点插入到北京前面</button>
    <br />
    <button onclick="replaceGzToBj()">使用广州节点替换北京节点</button>
    <br />
    <button onclick="deleteGz()">删除广州节点</button>
    <br />
    <button onclick="readCityList()">读取当前城市列表结构</button>
    <br />
    <button onclick="readBj()">读取北京内的节点</button>
  </body>
</html>
